<template>
  <main class="faq">
    <h1>Frenquently Asked Questions</h1>

    <Loading v-if="remoteDataBusy"></Loading>

    <div class="error" v-if="hadRemoteErrors">Can't load the questions !</div>

    <section class="list">
      <article v-for="question in questionList" :key="question._id">
        <h2 v-html="question.title"></h2>
        <p v-html="question.content"></p>
      </article>
    </section>
  </main>
</template>

<script>
import RemoteData from "../mixins/RemoteData";

export default {
  mixins: [
    RemoteData({
      questionList: "questions"
    })
  ]
  /*
  data() {
    return {
      questions: [],
    };
  },
  async created() {
    this.loading = true;
    try {
      this.questions = await this.$fetch('questions')
    } catch (error) {
      this.error = error;
    }
    this.loading = false;
  }
  */
};
</script>